<!--
 * @Author: 若城
 * @LastEditors: 若城
 * @Description: 
 * @FilePath: \tree\index.html
 * living Hell
-->
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">

    <meta name="description" content="A Christmas tree built out of form elements." />
    <meta name="author" content="Hakim El Hattab" />

    <meta http-equiv="X-UA-Compatible" content="chrome=1">

        <title>DOM Tree</title>

    <link href="css/index.css" rel="stylesheet" media="screen" />

    <link href='https://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>

    </head>
    <body>
      <div class="tree"></div>

    <script src="js/index.js"></script>

    <!-- Third party scripts and sharing UI -->
    <p class="project-title">DOM Tree</p>

    <div class="credits">
      <a href="https://blog.csdn.net/qq_53673551?spm=1000.2115.3001.5343">知心宝贝</a>
      <a href="https://twitter.com/hakimel">文章代码参考@hakimel</a>
    </div>

    <style type="text/css" media="screen">
      .project-title {
        position: absolute;
        left: 25px;
        bottom: 20px;

        font-size: 16px;
        color: #fff;
      }

      .credits {
        position: absolute;
        right: 20px;
        bottom: 25px;
        font-size: 15px;
        z-index: 20;
        color: #fff;
        vertical-align: middle;
      }

      .credits * + * {
        margin-left: 15px;
      }

      .credits a {
        padding: 8px 10px;
        color: rgba(255,255,255,0.7);
        border: 2px solid rgba(255,255,255,0.7);
        text-decoration: none;
      }

      .credits a:hover {
        border-color: #fff;
        color: #fff;
      }

      @media screen and (max-width: 1040px) {
        .project-title {
          display: none;
        }

        .credits {
          width: 100%;
          left: 0;
          right: auto;
          bottom: 0;
          padding: 30px 0;
          background: #b72424;
          text-align: center;
        }

        .credits a {
          display: inline-block;
          margin-top: 7px;
          margin-bottom: 7px;
        }
      }
</style>

    <script>
      var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
      (function(d, t) {
      var g = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      g.async = true;
      g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      s.parentNode.insertBefore(g, s);
      })(document, 'script');
</script>

    </body>
</html>